<%@ page contentType="text/html;charset=utf8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
	<head>
		<title>Login</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<link rel="stylesheet" href="resource/style/login/global.css"
			type="text/css" media="screen" />
		<link rel="stylesheet" href="resource/style/login/master.css"
			type="text/css" media="screen" />

		<script type="text/javascript"
			src="resource/javascript/common/jquery-1.4.2.min.js"></script>
		<script type="text/javascript"
			src="resource/javascript/validation/jquery.validate.js"></script>
			<!-- no java_main.js so we don't check for idle state 
		<script language="javascript" type="text/javascript">
            if (document.getElementById('txtLogin'))
			    document.getElementById('txtLogin').focus();
			if (screen.width < 1024)
				alert('This application is best run in a screen resolution of 1024x768 or greater. You are running a smaller screen resolution.');
			var detect = navigator.userAgent.toLowerCase();
			if ((detect.indexOf('mac') > 0) && (detect.indexOf('msie') > 0))
				alert('This application on Macintosh is optimized for OS X and Safari/Firefox browsers only. Internet Explorer browser is not supported.');
    	</script>-->
		<script type="text/javascript">
	var options = {
		target : '#panelErrorMsg', // target element(s) to be updated with server response 
		beforeSubmit : function() {
			alert("before submit");
		}, // pre-submit callback 
		success : function() {
			alert("success");
		}
	// post-submit callback 

	// other available options: 
	//url:       url         // override for form's 'action' attribute 
	//type:      type        // 'get' or 'post', override for form's 'method' attribute 
	//dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
	//clearForm: true        // clear all form fields after successful submit 
	//resetForm: true        // reset the form after successful submit 

	// $.ajax options can be used here too, for example: 
	//timeout:   3000 
	};
	$().ready(
			function() {
				$("#formLogin").validate(
						{
							rules : {
								username : "required",
								password : {
									required : true,
									minlength : 5
								}
							},
							messages : {
								username : "请输入姓名",
								password : {
									required : "请输入密码",
									minlength : jQuery.format("密码不能小于{0}个字符")
								}
							},
							submitHandler : function(form) {
								$.ajax( {
									contentType : 'application/json',
									type : "GET",
									url : "login/validate",
									dataType : 'json',
									data : {username : "aaa", password : "bbb"},
									//data : {name : "aaa"},
									success : function(result) {
										alert(result.message);
										$('#panelErrorMsg').html(result.message);
									},  
							        error : function() {  
							            alert("error");
							          }  
								});
							}
						});
			});
</script>
	</head>
	<body class="login">
		<!--[if lt IE 7]>
    <link rel="stylesheet" href="/CatalystStyles/ie6.css" type="text/css" media="screen" />    
    <![endif]-->
		<form id="formLogin" method="post" action="login">
			<div>
				<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />
			</div>
			<div id="panelErrorMsg">
			</div>
			<div id="login">
				<div id="cap-top">
				</div>
				<div id="cap-body">
				</div>
				<div id="branding" class="clearfix">
					<!-- 
					<img id="imgLogo"
						src="./imgs/businesscatalyst.png"
						style="border-width:0px;height:60px;width:200px;float:left;" />
						 -->
				</div>
				<div id="panelLogin">
					<div>
						<label>
							Account
						</label>
						<input id="txtUsername" name="username" type="text"
							class="textbox340" />
					</div>
					<div>
						<label>
							Password
						</label>
						<input id="txtPassword" name="password" type="password"
							class="textbox340" />
					</div>
					<div class="submit clearfix">
						<!-- 
						<input type="image" src="resources/image/login/button-login.png" alt="Login"
							name="btnLogin" id="btnLogin" onclick="$('formLogin').submit();" /> -->
						<input id="submitLogin" type="submit" value="submit" />
					</div>
				</div>
			</div>
			<div id="cap-bottom">
			</div>
			<!-- END #login -->
		</form>
	</body>
</html>
